<template>
    <div>
        <div class="chunk">
            <div class="title">收款信息</div>
            <div class="container_detail">
                <FormItems
                    ref="form"
                    v-model="info"
                    :form="formList"
                    state="readonly"
                >
                </FormItems>
            </div>
        </div>
    </div>
</template>
<script>
import FormItems from "@/views/finance/manage/formItems/index.vue";
export default {
    name: "",
    components: { FormItems },
    mixins: [],
    props: {
        value: {
            type: Object,
            required: true,
        },
        state: {
            required: false,
        },
    },

    data() {
        return {};
    },
    computed: {
        info: {
            get() {
                return this.useVModel.call(this);
            },
            set(val) {
                this.$emit("input", val);
            },
        },
        formList() {
            return [
                {
                    label: "收款人：",
                    prop: "payeeName",
                },
                {
                    label: "收款人类型：",
                    prop: "payeeTypeStr",
                },
                {
                    label: "收款账户：",
                    prop: "payeeBank",
                },
                {
                    label: "收款账号：",
                    prop: "payeeAccount",
                },
            ];
        },
    },
    watch: {},
    mounted() {},
    methods: {},
};
</script>
<style lang="scss" scoped>
.chunk {
    overflow: hidden;
    background-color: #fff;
    border-radius: 4px;
    padding: 15px 20px;
    margin: 20px;
    box-sizing: border-box;
    .title {
        border-bottom: 1px solid #e9e9e9;
        padding-bottom: 15px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #333333;
        line-height: 22px;
        text-align: left;
        font-style: normal;
    }

    .container_invoice {
        display: flex;
        margin-bottom: 15px;
        .preview {
            flex: 1;
            // width: 300px;
            display: flex;
            flex-direction: column;
            align-items: center;
            .container_preview {
                padding: 25px 0;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                // margin-top: 25px;
                width: 180px;
                .image {
                    aspect-ratio: 16/9;
                }
                .handleBtn {
                    display: flex;
                    justify-content: space-around;
                }
            }
        }
        .container_detail {
            flex: 2;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
}
.empty {
    font-size: 14px;
    text-align: center;
    padding: 20px;
}
</style>
